<template>
  <div class="center">
    <div class="center_two">
      <div class="tools_title">
        <div class="title"></div>
        <h2>{{$store.state.tooldetail}}</h2>
      </div>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;下列计算器可按你的体型计算出不用药优秀运动员的身体最大围度（大概8%-10%的体脂率）。方程是基于我六年对于过去和现在非用药冠军的研究和数据分析所得出的。本质上，这个计算器是将非用药冠军的体型去拟合你的体型。同时也包括了大量真实不用药健美冠军的数据。被这个计算器所使用的方程可在《不用药最大围度》这本书中里找到。</p>
      <div class="height"><span>身高：</span><input type="text">CM（厘米）</div>
      <div class="hand">
        <span>手腕：</span>
        <el-popover
          placement="right"
          width="400"
          trigger="click">
          <img src="http://pykvindxk.bkt.clouddn.com/%E6%89%8B%E8%85%95.png" alt="">
          <input slot="reference" type="text">
        </el-popover>
        CM（厘米）
        <i>茎突（腕部突出的骨块）以下的手腕周长，测量时手掌打开。</i>
      </div>
      <div class="foot">
        <div class="inputs">
          <span>脚踝：</span>
          <el-popover
            placement="right"
            width="400"
            trigger="click">
            <img src="http://pykvindxk.bkt.clouddn.com/%E8%84%9A%E8%B8%9D.png" alt="">
            <input slot="reference" type="text">
          </el-popover>
          CM（厘米）
          <i>小腿和脚踝之间最细处</i>
        </div>
      </div>
      <div class="count"><input type="button" value="计算"></div>
<!--      <div class="img_hand" :visible.sync="handVisible"><img src="http://pykvindxk.bkt.clouddn.com/%E6%89%8B%E8%85%95.png" alt=""></div>-->
<!--      <div class="img_foot" :visible.sync="footVisible"><img src="http://pykvindxk.bkt.clouddn.com/%E8%84%9A%E8%B8%9D.png" alt=""></div>-->



    </div>
  </div>
</template>

<script>


    export default {
        name: "tooldetail",
      data () {
        return {
          radio: '1',
          footvisible: false,
          handvisible:false
        }
      },
      beforeDestroy() {
          this.$store.state.tooldetail='';
      }
    }
</script>

<style scoped>
  .center{
    width: 1180px;
    height: 390px;
    margin: 20px auto;
    /*background: #85ed8b;*/
    padding-top: 20px ;
    border: gray 0.5px solid;
  }
  .center .center_two{
    width: 1100px;
    height: 351px;
    margin: auto;
    /*background: #ed3a4a;*/
  }
  .center .center_two .tools_title{
    height:30px;
    width: 1100px;
    margin: auto;
    /*background: #c5ed6b;*/

  }
  .center .center_two .tools_title .title{
    height: 30px;
    width: 6px;
    background: #ed3a4a;
    float: left;
    /*margin-top: px;*/
    margin-right: 8px;
  }
  .center .center_two p{
    width: 1080px;
    margin-top: 20px;
    padding: 20px 10px;
    background: #f4f4f4;
    border-radius:10px;
  }
  .height{
    margin: 20px 0px ;
  }
  .height input{
    margin: 0px 5px;
    width: 120px;
    height: 20px;
  }
  .hand{
    margin: 20px 0px;
  }
  .hand input{
    width: 120px;
    height: 20px;
  }
  .foot{
    margin: 20px 0px;
  }
  .foot input{
    width: 120px;
    height: 20px;
  }
  .count{
    margin-left: 600px;
  }
  .count input{
    width: 120px;
    height: 40px;
    font-size: 16px;
  }
  i{
    color: #ed3a4a;
  }
</style>
